<template>
  <div style="padding-top: 20px;">
    <el-row>
      <el-col :span="6">
        <el-form-item :label="$tt('有效期')">

          <div style="display: flex; align-items: center; gap: 4px;">
            <el-date-picker
                class="no-clear-input-text"
                v-model="formValue.versionStartTime"
                type="date"
                placeholder="开始日期"
                :clearable="false"
                value-format="timestamp"
                :disabled="versionStartTimeDisabled"
            >
            </el-date-picker>

            <span style="color: #606266;">至</span>
            <el-date-picker
                class="no-clear-input-text"
                v-model="formValue.versionEndTime"
                type="date"
                placeholder="开始日期"
                :clearable="false"
                value-format="timestamp"
            >
            </el-date-picker>
          </div>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="1">
        <!-- 最大投保金额 -->
        <el-form-item :label="$tt('label_pms_max_insurrance_amount')">
          <el-input v-model="formValue.maxAmount"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="1">
        <!-- 保费比例 -->
        <el-form-item :label="$tt('label_pms_insurrance_rate')">
          <el-input v-model="formValue.amountRate">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>


    <!-- 价卡修改记录  -->
    <el-row style="margin-bottom: 100px;">
      <el-col :span="3">
        <el-form-item :label="$tt('价卡修改记录')">

          <el-timeline style="margin-top: 10px;" class="transprot-price-time-line">
            <el-timeline-item
                v-for="(item, index) in  priceTagHistory"
                :key="index"
                :timestamp="$dateFormat(item.versionPriceTag)"

            >

              {{item.creator}}

              <ex-button-delete
                  style="position: absolute; left: 220px;"
                  message="确认切换至该版本吗？"
                  label="切换至该版本"
                  byAction
                  :delAction="()=>{ switchPriceVersion(item.id) }"
              ></ex-button-delete>

            </el-timeline-item>
          </el-timeline>

        </el-form-item>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "insurance_price_cfg",
  mixins: [],
  props: {
    versionStartTimeDisabled:{
      type: Boolean,
      default: false
    },
    inputForm: {
      type: Object,
      default: () => {}
    },
    priceVersionId: {
      type: String,
      default: '-1'
    }
  },
  data() {
    return {

      "formValue": {
        "id": '',
        "daterange":'',
        "versionId":'',
        "versionName":'',
        "versionStartTime":'',
        "versionEndTime":'',
        "versionType":'',
        "status":'',
        "versionTag":'',
        "productId":'',
        "maxAmount": 0,
        "amountRate": 0,
      },

      // 版本记录
      "priceTagHistory": []

    };
  },
  created() {
    let _this = this
    _this.initForm()

    _this.loadPriceVersionTags(_this.priceVersionId)
  },

  methods:{

    initForm() {

      let inputForm = {}

      inputForm = this.inputForm

      for (let kk in inputForm) {
        this.formValue[kk] = inputForm[kk]
      }

    },
    getFormData() {

      let _this = this

      return _this.formValue
    },

    loadPriceVersionTags(priceVersionId){
      let _this = this

      // 获取单位相关映射
      _this.$ajax({
        url: '/fms-api/product/PmsInsurancePriceRpc/loadPriceTags.json',
        data: { "priceVersionId": priceVersionId },
        success: (res) => {
          if (res && res.data && res.data.rows) {
            _this.priceTagHistory = res.data.rows
          }
        }
      });
    },

    switchPriceVersion(priceTagId){

      let _this = this
      // 获取单位相关映射
      _this.$ajax({
        url: '/fms-api/product/PmsInsurancePriceRpc/loadPriceTagDetail.json',
        data:{
          "priceTagId": priceTagId
        },
        success: (res) => {
          if (res && res.data) {
            _this.formValue.maxAmount = res.data.maxAmount
            _this.formValue.amountRate = res.data.amountRate
            _this.$message({
              type:'success',
              message: '切换成功'
            })

          }
        }
      });


    }

  }






}
</script>


<style>


  .transprot-price-time-line .el-timeline-item__wrapper{
    top: -9px;
  }
</style>
